<%--
  Created by IntelliJ IDEA.
  User: chen3
  Date: 2021-07-28
  Time: 10:19
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8"%>
<html>
<head>
    <title>登录</title>
    <link href="${pageContext.request.contextPath}/bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/layui/css/layui.css" rel="stylesheet">
    <script src="${pageContext.request.contextPath}/jquery/jquery-3.3.1.js"></script>
    <script src="${pageContext.request.contextPath}/layui/layui.js"></script>
    <style>
        body{
            background:url('${pageContext.request.contextPath}/images/loginbg.jpeg')  no-repeat center center;
            background-size:cover;
            background-attachment:fixed;
            background-color:#CCCCCC;
        }
    </style>
</head>
<body>
<div class="container" style="color: white;">
    <h3 align="center" class="mt-3 mt-b">登录</h3>
    <div class="mt-3 mb-3" style="text-align: center;">
        <img id="headerImg" src="${pageContext.request.contextPath}/images/good.jpg" alt="#" width="80" style="border-radius: 50%">
    </div>
    <form class="layui-form" action="login" method="post" onsubmit="return false">
        <div class="layui-form-item">
            <label class="layui-form-label" for="acc">账号：</label>
            <div class="layui-input-block">
                <input lay-verify="required" type="text" name="userId" id="acc" class="layui-input" placeholder="请输入账号" onchange="change()">
                <span style="color: red;visibility: hidden">用户不存在,请先去 <a style="color:white;" href="register">注册</a></span>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" for="pasd">密码：</label>
            <div class="layui-input-block">
                <input lay-verify="required"  type="password" name="password" id="pasd" class="layui-input" placeholder="请输入密码">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn layui-bg-blue" lay-submit onclick="login()">登录</button>
                <a class="layui-btn layui-bg-green" href="register">注册</a>
                <a style="color: white;" class="ml-2" href="${pageContext.request.contextPath}/forget">忘记密码？</a>
            </div>
        </div>
    </form>
</div>
<script type="text/javascript">
    function login() {
        var acc = $('#acc').val();
        var password = $('#pasd').val();
        if(acc.length >= 3 && acc.length <= 8){
            if(password.length >= 3 && password.length <= 8){
                $.ajax({
                    url:'${pageContext.request.contextPath}/user/login',
                    method:'post',
                    data:{
                        username:acc,
                        password:password
                    },
                    success:function (data) {
                        console.log(data.code);
                        if(data.code === 0){
                            layer.msg("登录成功！");
                            location.href = "${pageContext.request.contextPath}/index.jsp";
                        }else {
                            layer.msg("登陆失败！");
                        }
                    }
                });
            }else {
                layer.msg("密码长度必须为3~8位!");
            }
        }else {
            layer.msg("账户长度必须为3~8位!");
        }
    }
    function change() {
        var acc = $('#acc').val();
        $.ajax({
            url:'${pageContext.request.contextPath}/user/IsExist',
            type:'get',
            dataType:'json',
            data:{
                username:acc
            },
            success:function (data) {
                console.log(data);
                if(data.code === 1){
                    $('form span').css("visibility","hidden");
                    $('#acc').css("border-color","white");
                    $('#headerImg').attr("src","${pageContext.request.contextPath}/images/"+data.data.headerImg);
                }
                if(data.code === 0){
                    $('#acc').css("border-color","red");
                    $('form span').css("visibility","visible");
                }
            }
        });
    }
</script>
</body>
</html>
